<script setup lang="ts">
import {ref, computed} from "vue";
import { ElButton, ElForm, ElFormItem, ElInput, ElIcon } from 'element-plus';
import { Edit, Check, Close } from '@element-plus/icons-vue';
import {getCompanyPersonalInfoService, updateCompanyInfoService} from "@/api/user.js"; // 引入图标组件
import { ElMessage } from 'element-plus'


const companyInfo = ref({
  companyId: 'C001',
  name: '示例科技有限公司',
  phone: '021-12345678',
  introduction: '我们是一家专注于前沿技术开发的创新型企业，致力于提供高质量的软件解决方案。',
  status: '已融资',
  size: '100-500人',
  address: '上海市浦东新区陆家嘴环路1000号',
  companyType: '互联网'
});

async function getUserInfo(){
  let res = await getCompanyPersonalInfoService()
  companyInfo.value = res.data
  console.log(companyInfo.value)
}

getUserInfo();

const isEditing = ref(false);

const toggleEdit = () => {
  isEditing.value = !isEditing.value;
};

const saveChanges = async () => {
  // 实现保存逻辑，比如提交表单或API调用
  await updateCompanyInfoService(companyInfo.value)
  ElMessage.success('保存成功');
  toggleEdit(); // 保存后返回查看模式
};

const cancelEdit = () => {
  console.log("取消"); // 添加这行进行调试
  toggleEdit(); // 取消编辑，回到查看模式
};


</script>

<template>
  <!-- Start Candidates Profile Area -->

  <div class="col-lg-8">
    <div class="candidates-profile-content">
      <el-form class="profile-info" label-position="top">
        <h3>公司信息</h3>
        <el-row :gutter="24">

          <el-col :span="12">
            <el-form-item label="公司名字">
              <template v-if="isEditing">
                <el-input v-model="companyInfo.name"></el-input>
              </template>
              <template v-else>
                <span>{{ companyInfo.name }}</span>
              </template>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="公司地址">
              <template v-if="isEditing">
                <el-input v-model="companyInfo.address"></el-input>
              </template>
              <template v-else>
                <span>{{ companyInfo.address }}</span>
              </template>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="公司行业">
              <template v-if="isEditing">
                <el-input v-model="companyInfo.companyType"></el-input>
              </template>
              <template v-else>
                <span>{{ companyInfo.companyType }}</span>
              </template>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="联系电话">
              <template v-if="isEditing">
                <el-input v-model="companyInfo.phone"></el-input>
              </template>
              <template v-else>
                <span>{{ companyInfo.phone }}</span>
              </template>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="融资情况">
              <template v-if="isEditing">
                <el-select v-model="companyInfo.status" placeholder="请选择融资情况">
                  <el-option label="已融资" value="已融资"></el-option>
                  <el-option label="未融资" value="未融资"></el-option>
                  <el-option label="未上市" value="未上市"></el-option>
                  <el-option label="已上市" value="已上市"></el-option>
                </el-select>
              </template>
              <template v-else>
                <span>{{ companyInfo.status }}</span>
              </template>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="公司规模">
              <template v-if="isEditing">
                <el-select v-model="companyInfo.size" placeholder="请选择公司规模">
                  <el-option label="1~20人" value="0~20人"></el-option>
                  <el-option label="20~100人" value="20~100人"></el-option>
                  <el-option label="100~500人" value="100~500人"></el-option>
                  <el-option label="500~2000人" value="500~2000人"></el-option>
                  <el-option label="2000~10000人" value="2000~10000人"></el-option>
                  <el-option label="10000人以上" value="10000人以上"></el-option>
                </el-select>
              </template>
              <template v-else>
                <span>{{ companyInfo.size }}</span>
              </template>
            </el-form-item>
          </el-col>


          <el-col :span="24">
            <el-form-item label="公司简介">
              <template v-if="isEditing">
                <el-input
                    v-model="companyInfo.introduction"
                    type="textarea"
                    :autosize="{ minRows: 5, maxRows: 100 }"
                    placeholder="请输入公司简介"
                    style="width: 400px; height: 900px"
                ></el-input>
              </template>
              <template v-else>
                <span>{{ companyInfo.introduction.substring(0, 35) + '...' }}</span>
              </template>
            </el-form-item>
          </el-col>

          <div class="button-group">
            <el-button
                v-if="!isEditing"
                @click="toggleEdit"
                type="text"
                :icon="Edit"
                size="large"
                class="edit-button"> <!-- 添加这个类名 -->
              修改
            </el-button>

            <el-button
                v-else
                @click="saveChanges"
                type="primary"
                :icon="Check"
                size="large">
              保存
            </el-button>

            <el-button
                v-if="isEditing"
                @click="cancelEdit"
                type="danger"
                :icon="Close"
                size="large">
              取消
            </el-button>
          </div>

        </el-row>
      </el-form>

    </div>
  </div>


  <!-- End Candidates Profile Area -->
</template>

<style scoped>
@import "@/assets/css/bootstrap.min.css";
@import "@/assets/css/owl.theme.default.min.css";
@import "@/assets/css/owl.carousel.min.css";
@import "@/assets/css/animate.min.css";
@import "@/assets/css/boxicons.min.css";
@import "@/assets/css/magnific-popup.min.css";
@import "@/assets/css/flaticon.css";
@import "@/assets/css/meanmenu.min.css";
@import "@/assets/css/nice-select.min.css";
@import "@/assets/css/odometer.min.css";
@import "@/assets/css/date-picker.min.css";
@import "@/assets/css/muli-fonts.css";
@import "@/assets/css/style2.css";
@import "@/assets/css/responsive2.css";

.button-group {
  display: flex;
  justify-content: flex-end; /* 保持这行代码，确保按钮向右对齐 */
  gap: 10px; /* 在按钮间添加间隔，提升视觉体验 */
  margin-top: 16px;
}

.el-button {
  /* 自定义按钮的圆角大小 */
  width: 200px;
  border-radius: 16px; /* 你可以根据需要调整这个数值 */
}

.edit-button {
  border: 2px solid #1890ff; /* 蓝色边框，可以根据需要调整颜色 */
  border-radius: 16px; /* 保持圆角风格，可调整数值 */
  padding: 8px 16px; /* 调整内边距以适应边框，根据实际需求调整 */
}

/* 如果需要在悬停时改变边框颜色，可以添加如下样式 */
.edit-button:hover {
  border-color: #40a9ff; /* 更改悬停时的边框颜色 */
}

.candidates-profile-content {
  width: 155%;
}

</style>